<template>
  <div>
    <p>欢迎光临vue开发的手印系统</p>
    <div class="box">
      <div :class="['bold', 'box1']">苹果 10￥/斤,折扣&it; 8折></div>
      <div class="box1">
        请输入你要购买的斤数
        <input type="text" v-model="jin" />
      </div>
      <div class="box1">
        <button @click="prev">结账买单~</button>
      </div>
      <div class="box1">
        结账单：总价：{{ zong }}￥元，折扣价：{{ zhe }}￥元省了：{{ sheng }}￥元
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  props: {},
  data() {
    return {
      zong: 0,
      zhe: 0,
      sheng: 0,
      jin: 0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    prev() {
      this.zong = 10 * this.jin;
      this.zhe = 10 * this.jin * 0.8;
      this.sheng = 10 * this.jin * 0.2;
    },
  },
};
</script>

<style scoped>
p {
  text-align: center;
}
.box {
  /* height: 100px; */
  border: 1px solid #ccc;
}
.box1 {
  margin: 2px;
  text-align: center;
  border: 1px solid #000;
}
.bold {
  font-weight: bold;
}
</style>
